<template>
  <div id="news">
    <!-- header start -->
    <!-- end  -->
    <!-- end top -->
    <!-- end  -->
    <div class="notic_con_wper">
      <div class="notic_con px1000">
        <div class="notic_ban">
          <img src="../assets/images/notic_ban01.png" alt="">
        </div>
        <div class="notic_section clearfix" style="height: 500px">
          <div class="notic_sec_l fl">
            <h3><img src="../assets/images/notic_pic01_meitu_1.jpg" alt=""></h3>
            <ul class="notic_secl_ul">
              <li @click="changgenewflag" :class="{checkedthis:(flag1==true)}">行业动态 </li>
            </ul>
          </div>
          <!-- end l -->
          <div class="notic_sec_r fl" v-show="flag1">
            <h2 class="notic_secr_tit">行业动态</h2>

            <div v-show="showNewFlag">
              <ul class="notic_secr_ul" v-for="n in news">
                <li class="clearfix"><a href="javascript:;" @click="findsinglenew(n.newId)">{{n.newTrend}}</a></li>
              </ul>
              <p class="notic_pagelink" >
                  <span v-for="i in pageInfo.pages">
                    <a href="javascript:;" @click="findnewpage(i)" :class="{notic_acur:(activeNum==i)}">{{i}}</a>
                  </span>
              </p>
            </div>
            <div v-show="!showNewFlag">
              <p style="font-size: 18px">{{singleNew.newTrend}}</p>
              <article style="font-size: 16px;margin-top: 20px">
                {{singleNew.newMedia}}
              </article>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import "../assets/css/style.css"
  export default {
    name: "news",
    data(){
      return{
        flag1:true,
        news:[],
        pageInfo:[],
        activeNum:1,
        showNewFlag:true,
        singleNew:{}
      }
    },
    methods:{
      findnewpage:function(index){
        this.activeNum=index
        this.axios.post("/api/new/getsinglepage",{pageNum:index}).then((data)=>{
          this.news=data.data.list
          this.pageInfo=data.data
        })
      },
      findsinglenew:function (id) {
        this.axios.post("/api/new/getsinglenew",{newId:id}).then((data)=>{
          this.singleNew=data.data
          this.showNewFlag=false
        })
      },
      changgenewflag:function () {
        this.showNewFlag=true
      }
    },
    created() {
      this.axios.post("/api/new/getnewList")
        .then((data)=>{
          this.news=data.data.list
          this.pageInfo=data.data
          let newId=localStorage.getItem("newId")
          this.axios.post("/api/new/getsinglenew",{newId:newId}).then((data)=>{
            this.singleNew=data.data
            if(newId!=''){
              this.showNewFlag=false
              localStorage.newId=''
            }
          })
        })
    }
  }
</script>

<style scoped>
  .checkedthis{
    background-color: #ebebeb;
  }

  .notic_pagelink .notic_acur {
    background-color: #fff;
    color: #ffa800;
  }
</style>

